@mixin transition($time: .2s) {
  transition-duration: $time;
}

@mixin ellipsis($line: 1) {
  @if  $line > 1 {
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: $line;
      -webkit-box-orient: vertical;
  } @else {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }
}

@mixin themed($duration: .1s) {
  transition-timing-function: ease-in;
  transition-duration: $duration;
  transition-property: background-color, color, border-color;
}

%themed {
  @include themed;
}

%ellipsis {
  @include ellipsis;
}
